<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="bold my-e0p5 fontSize-lg indent">
			vi-collapse
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>opened</view>
				<view>Boolean</view>
				<view>false</view>
				<view>面板默认打开状态</view>
			</view>
			<view class="tr">
				<view>title</view>
				<view>String</view>
				<view>无</view>
				<view>面板标题文字，也可用slot=title设置</view>
			</view>
			<view class="tr">
				<view>showArrow</view>
				<view>Boolean</view>
				<view>true</view>
				<view>显示指示箭头</view>
			</view>
			<view class="tr">
				<view>titleAlign</view>
				<view>String</view>
				<view>between</view>
				<view>标题文字与箭头的对齐方式，可选left、right、center、between</view>
			</view>
			<view class="tr">
				<view>id</view>
				<view>String</view>
				<view>无</view>
				<view>面板id，不设则自动以随机数生成</view>
			</view>
			<view class="tr">
				<view>groupId</view>
				<view>String</view>
				<view>无</view>
				<view>面板组id，使用组时必须设置，必须唯一且与组一致</view>
			</view>
			<view class="tr">
				<view>animation</view>
				<view>Boolean</view>
				<view>true</view>
				<view>是否开启面板过渡动画</view>
			</view>
			<view class="tr">
				<view>transition</view>
				<view>Number</view>
				<view>300</view>
				<view>面板过渡动画持续时间</view>
			</view>
			<view class="tr">
				<view>mainClass</view>
				<view>String</view>
				<view>无</view>
				<view>面板外框样式名，只对全局样式或穿透样式有效。在外部给组件加样式名在微信小程序异常</view>
			</view>
			<view class="tr">
				<view>headClass</view>
				<view>String</view>
				<view>无</view>
				<view>面板标题框样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>bodyClass</view>
				<view>String</view>
				<view>无</view>
				<view>面板内容框样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>mainOpenClass</view>
				<view>String</view>
				<view>无</view>
				<view>面板打开时外框样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>headOpenClass</view>
				<view>String</view>
				<view>无</view>
				<view>面板打开时标题框样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>bodyOpenClass</view>
				<view>String</view>
				<view>无</view>
				<view>面板打开时内容框样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>headHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>标题栏高</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>arrow：icon-arr-down 展开箭头</view>
				</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>面板状态改变事件，提交打开状态参数</view>
			</view>
		</view>
		
		
		<view class="bold my-e0p5 fontSize-lg indent">
			vi-collapse-group
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>groupId</view>
				<view>String</view>
				<view>无</view>
				<view>面板组id，必须设置，必须唯一且与子面板一致</view>
			</view>
			<view class="tr">
				<view>accordion</view>
				<view>Boolean</view>
				<view>true</view>
				<view>手风琴模式</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>面板状态改变事件，仅手风琴模式有效。提交对象参数，包含id：子面板id，open：当前打开状态</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：
				<view>
					{{'&lt;vi-collapse title="面板标题">'}}
					<view class="ml-e2">
						面板内容
					</view>
					{{'&lt;/vi-collapse>'}}
				</view>
			</view>
			<view class="py-sm">
				<vi-collapse title="标题" headClass="bgColor-contrast" mainClass="b-default">
					<view class="p-sm">
						面板内容
					</view>
				</vi-collapse>
			</view>
			<view class="py-sm">
				嵌套使用：
				<view>
					{{'&lt;vi-collapse title="面板标题1">'}}
					<view class="ml-e2">
						其他内容
					</view>
					<view class="ml-e2">
						{{'&lt;vi-collapse title="面板标题2">'}}
						<view class="ml-e2">
							面板内容2
						</view>
						{{'&lt;/vi-collapse>'}}
					</view>
					{{'&lt;/vi-collapse>'}}
				</view>
			</view>
			<view class="py-sm">
				<vi-collapse title="标题1" headClass="bgColor-contrast" mainClass="b-default">
					<view class="p-sm bgColor-default">
						<view class="pb-sm">
							其他内容
						</view>
						<vi-collapse title="标题2" headClass="bgColor-contrast" mainClass="b-default" opened>
							<view class="p-sm">
								<view class="pb-sm">
									面板2
								</view>
								<vi-collapse title="标题3" headClass="bgColor-contrast" mainClass="b-default">
									<view class="p-sm">
										面板3内容
									</view>
								</vi-collapse>
							</view>
						</vi-collapse>
					</view>
				</vi-collapse>
			</view>
			<view class="py-sm">
				组使用，手风琴模式：
				<view>
					{{'&lt;vi-collapse-group groupId="组id">'}}
					<view class="ml-e2">
						{{'&lt;vi-collapse groupId="组id" title="面板标题1">'}}
						<view class="ml-e2">
							内容1
						</view>
						{{'&lt;/vi-collapse>'}}
					</view>
					<view class="ml-e2">
						{{'&lt;vi-collapse groupId="组id" title="面板标题2">'}}
						<view class="ml-e2">
							内容2
						</view>
						{{'&lt;/vi-collapse>'}}
					</view>
					{{'&lt;/vi-collapse-group>'}}
				</view>
			</view>
			<view class="py-sm">
				<vi-collapse-group groupId="g1">
					<vi-collapse groupId="g1" title="标题1" headClass="bgColor-contrast" mainClass="b-default">
						<view class="p-sm">
							面板1内容
						</view>
					</vi-collapse>
					<vi-collapse groupId="g1" title="标题2" headClass="bgColor-contrast" mainClass="b-default">
						<view class="p-sm">
							面板2内容
						</view>
					</vi-collapse>
					<vi-collapse groupId="g1" title="标题3" headClass="bgColor-contrast" mainClass="b-default">
						<view class="p-sm">
							面板3内容
						</view>
					</vi-collapse>
				</vi-collapse-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
